<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模仿acfun菜单栏</title>
    <link rel="shortcut icon" type="image/x-icon" href="/bigyi/icon.png">
    <style>
    div.top {
        height: 50px;
        text-align: center;
    }
    
    div.main {
        width: 800px;
        height: 500px;
        background-color: #fff;
        opacity: 0.5;
    }
    
    ul,
    li {
        list-style: outside none none;
    }
    
    .yiname {
        height: 30px;
        width: 55px;
        background-color: #fff;
        border-top: 15px;
        float: left;
        margin-left: 2px;
        margin-right: 2px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 15px;
        border-top: 4px solid #fff;
        text-align: center;
        position: relative;
        top: 5px;
        font-family: "微软雅黑"；
    }
    
    .yiname a {
        text-decoration: none;
        color: #334455;
    }
    
    .ername {
        text-align: left;
        width: 130px;
        height: 25px;
        padding-top: 5px;
        padding-left: 5px;
        background-color: #fff;
        display: none;
        box-shadow: 0 5px 9px #eee;
        position: relative;
        left: -60px;
        top: 10px;
    }
    
    .yiname:hover {
        border-top: 4px solid #fdcfd2;
        box-shadow: 0 0 5px #ccc;
        background-color: #fff;
    }
    
    .yiname:hover a {
        color: #ee0000;
    }
    
    .yiname:hover .ername {
        display: block;
    }
    /*上面必须是.yiname:hover空格.ername    必须有空格
        同时注释如果用<!----> 代码就会出错误不往下编译了 不知道为什么*/
    
    .ername:hover {
        color: #ee0000;
        background-color: #fdcfd2;
    }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="main">
        <ul>
            <li class="yiname">首页
            </li>
            <li class="yiname"><a href="" class="yitext">动画</a>
                <ul>
                    <li class="ername"><span>动画短片</span></li>
                    <li class="ername">新番连载</li>
                </ul>
            </li>
            <li class="yiname"><a href="" class="yitext">音乐</a>
                <ul>
                    <li class="ername">原创.翻唱</li>
                    <li class="ername">演奏</li>
                    <li class="ername">综合音乐</li>
                </ul>
            </li>
            <li class="yiname"><a href="" class="yitext">舞蹈</a>
                <ul>
                    <li class="ername">宅舞</li>
                    <li class="ername">综合舞蹈</li>
                    <li class="ername">MMD.3D</li>
                </ul>
            </li>
            <li class="yiname"><a href="" class="text">文章</a>
            </li>
        </ul>
    </div>
</body>

</html>
